import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { Button, Modal, Space, Select } from 'antd';

const aboutMask = (props) => {
    const {
        visible = false,
        onClose,
        list,
        selectIndex,
        onChange,
    } = props;
    const { show = false, detail = [], } = visible;
    const [renderList, setRenderList] = useState([])
    useEffect(() => {
        if (show) {
            setRenderList(detail)
        } else {
            setRenderList([])
        }


    }, [show])
    const getColumns = [
        {
            title: '选项',
            dataIndex: 'label',
        },
        {
            title: '关联题目',
            dataIndex: 'associationList',
            render: (e, record, c) => {
                return <Select onChange={(e) => {
                    setRenderList(renderList.map((val, index) => {
                        if (index === c) {
                            return {
                                ...val,
                                associationList: e
                            }
                        }
                        else {
                            return val
                        }

                    }))
                    console.log(e)
                }} style={{ width: '800px' }} mode={'multiple'} options={list.filter((val, index) => {
                    return index > selectIndex
                }).map((val, index) => {
                    return { label: '第' + (selectIndex + index + 1) + '题:' + val.label, value: selectIndex + index + 1 }
                })} value={e}></Select>
            }

        },


    ];
    const modalProps = {
        title: `设置题目关联`,
        width: 1200,
        visible: typeof visible === 'boolean' ? visible : show,
        maskClosable: true,
        destroyOnClose: true,
        zIndex: 1001,
        onOk: () => {
            onChange({
                changeType: 'update',
                index: selectIndex,
                data: {
                    option: renderList
                }
            })
            onClose()
        },
    };

    return (
        <Modal {...modalProps} onCancel={onClose}>
            <TableDataBlock
                columns={getColumns}
                rowKey={(record) => `${record.id}`}
                list={renderList}
                pagination={false}
            ></TableDataBlock>
            <div style={{ marginTop: 24 }}>
                批量设置：<Select onChange={(e) => {
                    setRenderList(renderList.map((val, index) => {
                        return {
                            ...val,
                            associationList: e
                        }

                    }))
                }} style={{ width: 800 }} mode={'multiple'} options={list.filter((val, index) => {
                    return index > selectIndex
                }).map((val, index) => {
                    return { label: '第' + (selectIndex + index + 1) + '题', value: selectIndex + index + 1 }
                })}></Select>
            </div>
        </Modal>
    );
};

export default aboutMask